<template>
  <div class="student-management">
    <el-card>
      <div slot="header">
        <span>学生管理</span>
        <div style="float: right;">
          <el-button style="padding: 3px 0; margin-right: 10px;" type="text" @click="loadStudentList">刷新数据</el-button>
          <el-button style="padding: 3px 0" type="text" @click="handleAdd">添加学生</el-button>
        </div>
      </div>
      
      <!-- 搜索和筛选区域 -->
      <div class="search-area">
        <el-card class="search-card" shadow="never">
          <div class="search-header">
            <h3 class="search-title">
              <i class="el-icon-search"></i>
              搜索筛选
            </h3>
            <div class="search-actions">
              <el-button size="small" @click="toggleAdvancedSearch">
                {{ showAdvancedSearch ? '收起高级搜索' : '展开高级搜索' }}
                <i :class="showAdvancedSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>
            </div>
          </div>
          
          <div class="search-content">
            <!-- 基础搜索 -->
            <el-row :gutter="20" class="search-row">
              <el-col :span="8">
                <div class="search-item">
                  <label class="search-label">关键词搜索</label>
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索学号、姓名、昵称或手机号"
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleSearch"
              clearable
                    class="search-input"
            />
                </div>
          </el-col>
              <el-col :span="5">
                <div class="search-item">
                  <label class="search-label">学校筛选</label>
                  <el-select v-model="searchForm.schoolId" placeholder="选择学校" clearable class="search-select">
              <el-option
                v-for="school in schoolOptions"
                :key="school.id"
                :label="school.name"
                :value="school.id"
              />
            </el-select>
                </div>
          </el-col>
              <el-col :span="5">
                <div class="search-item">
                  <label class="search-label">状态筛选</label>
                  <el-select v-model="searchForm.status" placeholder="选择状态" clearable class="search-select">
                    <el-option label="正常" value="active">
                      <i class="el-icon-success"></i> 正常
                    </el-option>
                    <el-option label="禁用" value="disabled">
                      <i class="el-icon-error"></i> 禁用
                    </el-option>
                    <el-option label="待审核" value="pending">
                      <i class="el-icon-warning"></i> 待审核
                    </el-option>
            </el-select>
                </div>
          </el-col>
              <el-col :span="6">
                <div class="search-buttons">
                  <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                  <el-button icon="el-icon-download" @click="handleExport">导出</el-button>
                </div>
          </el-col>
        </el-row>

            <!-- 高级搜索 -->
            <div v-show="showAdvancedSearch" class="advanced-search">
              <el-divider content-position="left">高级搜索选项</el-divider>
              <el-row :gutter="20" class="search-row">
                <el-col :span="6">
                  <div class="search-item">
                    <label class="search-label">注册时间</label>
                    <el-date-picker
                      v-model="searchForm.createTimeRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="small"
                      class="search-date"
                    />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="search-item">
                    <label class="search-label">最后登录</label>
                    <el-date-picker
                      v-model="searchForm.lastLoginTimeRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="small"
                      class="search-date"
                    />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="search-item">
                    <label class="search-label">专业筛选</label>
                    <el-input
                      v-model="searchForm.major"
                      placeholder="输入专业名称"
                      clearable
                      size="small"
                    />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="search-item">
                    <label class="search-label">年级筛选</label>
                    <el-select v-model="searchForm.grade" placeholder="选择年级" clearable size="small">
                      <el-option label="2024级" value="2024级" />
                      <el-option label="2023级" value="2023级" />
                      <el-option label="2022级" value="2022级" />
                      <el-option label="2021级" value="2021级" />
                      <el-option label="2020级" value="2020级" />
                    </el-select>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 调试信息 -->
      <div v-if="studentList.length === 0 && !loading" class="no-data">
        <p>暂无数据</p>
        <p>当前数据: {{ JSON.stringify(studentList) }}</p>
        <p>加载状态: {{ loading }}</p>
      </div>

      <!-- 学生列表 -->
      <el-table
        :data="studentList"
        v-loading="loading"
        stripe
        border
        size="medium"
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center'
        }"
        :row-class-name="getRowClassName"
        @row-click="handleRowClick"
        :fit="true"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="学生信息" min-width="150">
          <template slot-scope="scope">
            <div class="student-info">
              <div class="student-name">{{ scope.row.name || scope.row.nickname || '未设置' }}</div>
              <div class="student-id" v-if="scope.row.studentId">学号: {{ scope.row.studentId }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="80" align="center">
          <template slot-scope="scope">
            <div class="avatar-wrapper">
              <el-avatar 
                :src="scope.row.avatarUrl || scope.row.avatar" 
                :size="45"
                class="student-avatar-small"
              >
              <i class="el-icon-user-solid"></i>
            </el-avatar>
              <div v-if="isRecentlyActive(scope.row.lastLoginTime)" class="online-dot"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" min-width="180">
          <template slot-scope="scope">
            <div class="contact-info">
              <div v-if="scope.row.phone" class="contact-item">
                <i class="el-icon-phone"></i>
                <span>{{ scope.row.phone }}</span>
              </div>
              <div v-if="scope.row.email" class="contact-item">
                <i class="el-icon-message"></i>
                <span>{{ scope.row.email }}</span>
              </div>
              <div v-if="!scope.row.phone && !scope.row.email" class="contact-empty">
                <i class="el-icon-warning"></i>
                <span>暂无联系方式</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学术信息" min-width="200">
          <template slot-scope="scope">
            <div class="academic-info">
              <div class="school-name">
                <i class="el-icon-school"></i>
                <span>{{ scope.row.schoolName || '未设置学校' }}</span>
              </div>
              <div class="academic-details">
                <span class="major">{{ scope.row.major || '未设置专业' }}</span>
                <el-divider direction="vertical"></el-divider>
                <span class="grade">{{ scope.row.grade || '未设置年级' }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <div class="status-wrapper">
              <el-tag 
                :type="getStatusType(scope.row.status)" 
                size="small"
                class="status-tag"
                effect="dark"
              >
                <i :class="getStatusIcon(scope.row.status)"></i>
              {{ getStatusName(scope.row.status) }}
            </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" min-width="160">
          <template slot-scope="scope">
            <el-tooltip :content="getRelativeTime(scope.row.createTime)" placement="top">
              <span class="time-text">{{ formatDate(scope.row.createTime) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center" key="actions" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
            <el-button 
              size="mini" 
                icon="el-icon-view" 
                @click.stop="handleView(scope.row)"
            >
                查看
            </el-button>
              <el-button 
                size="mini" 
                type="primary" 
                icon="el-icon-edit" 
                @click.stop="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-dropdown @command="handleAction" trigger="click">
                <el-button size="mini">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item 
                    :command="{action: 'toggle', row: scope.row}"
                    :icon="scope.row.status === 'active' ? 'el-icon-lock' : 'el-icon-unlock'"
                  >
                    {{ scope.row.status === 'active' ? '禁用账户' : '启用账户' }}
                  </el-dropdown-item>
                  <el-dropdown-item 
                    :command="{action: 'reset', row: scope.row}"
                    icon="el-icon-refresh"
                  >
                    重置密码
                  </el-dropdown-item>
                  <el-dropdown-item 
                    :command="{action: 'delete', row: scope.row}"
                    icon="el-icon-delete"
                    divided
                  >
                    删除学生
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-area">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </el-card>

    <!-- 学生详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="900px"
      show-close="false"
      class="student-detail-dialog"
    >
      <div class="student-detail-container">
        <!-- 详情头部 -->
        <div class="detail-header">
          <div class="header-left">
            <div class="avatar-section">
              <el-avatar :src="currentStudent.avatar" :size="80" class="student-avatar">
                <i class="el-icon-user-solid"></i>
              </el-avatar>
              <div class="online-indicator" v-if="isRecentlyActive(currentStudent.lastLoginTime)"></div>
            </div>
            <div class="basic-info">
              <h2 class="student-name">
                {{ currentStudent.name || currentStudent.nickname || '未设置姓名' }}
              </h2>
              <p class="student-id">学号: {{ currentStudent.studentId || '未设置' }}</p>
              <el-tag 
                :type="getStatusType(currentStudent.status)" 
                size="medium" 
                class="status-badge"
                effect="dark"
              >
                <i :class="getStatusIcon(currentStudent.status)"></i>
                {{ getStatusName(currentStudent.status) }}
              </el-tag>
            </div>
          </div>
          <div class="header-right">
            <el-button type="text" @click="detailDialogVisible = false" class="close-btn">
              <i class="el-icon-close"></i>
            </el-button>
          </div>
        </div>

        <!-- 详情内容 -->
        <div class="detail-content">
          <!-- 基本信息卡片 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-user"></i>
              <h3>基本信息</h3>
            </div>
            <div class="card-body">
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-user"></i>
                    真实姓名
                  </div>
                  <div class="info-value">{{ currentStudent.name || '未设置' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-postcard"></i>
                    微信昵称
                  </div>
                  <div class="info-value">{{ currentStudent.nickname || '未设置' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-phone"></i>
                    手机号码
                  </div>
                  <div class="info-value">
                    {{ currentStudent.phone || '未设置' }}
                  </div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-message"></i>
                    邮箱地址
                  </div>
                  <div class="info-value">{{ currentStudent.email || '未设置' }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 学校信息卡片 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-school"></i>
              <h3>学校信息</h3>
            </div>
            <div class="card-body">
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-office-building"></i>
                    所在学校
                  </div>
                  <div class="info-value">{{ currentStudent.schoolName || '未设置' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-reading"></i>
                    专业
                  </div>
                  <div class="info-value">{{ currentStudent.major || '未设置' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-date"></i>
                    年级
                  </div>
                  <div class="info-value">{{ currentStudent.grade || '未设置' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-medal"></i>
                    信用分
                  </div>
                  <div class="info-value">{{ currentStudent.creditScore || 100 }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 账户活动卡片 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-time"></i>
              <h3>账户活动</h3>
            </div>
            <div class="card-body">
              <div class="activity-stats">
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="el-icon-calendar"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-label">注册时间</div>
                    <div class="stat-value">{{ formatDate(currentStudent.createTime) }}</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="el-icon-time"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-label">最后登录</div>
                    <div class="stat-value">{{ formatDate(currentStudent.lastLoginTime) }}</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="el-icon-trophy"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-label">信用等级</div>
                    <div class="stat-value">优秀</div>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-icon">
                    <i class="el-icon-data-line"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-label">活跃度</div>
                    <div class="stat-value">
                      <el-progress 
                        :percentage="getActivityLevel(currentStudent.lastLoginTime)" 
                        :stroke-width="6"
                        :text-inside="false"
                        :show-text="false"
                      ></el-progress>
                      <span class="activity-text">{{ getActivityText(currentStudent.lastLoginTime) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 详情底部 -->
        <div class="detail-footer">
          <div class="footer-left">
            <el-button icon="el-icon-download">导出信息</el-button>
            <el-button icon="el-icon-chat-dot-round">发送消息</el-button>
          </div>
          <div class="footer-right">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="handleEditFromDetail">编辑信息</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加/编辑学生对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form
        ref="studentForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="微信昵称" prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入微信昵称" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="学校" prop="schoolId">
          <el-select v-model="formData.schoolId" placeholder="请选择学校" style="width: 100%">
            <el-option
              v-for="school in schoolOptions"
              :key="school.id"
              :label="school.name"
              :value="school.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="formData.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-select v-model="formData.grade" placeholder="请选择年级" style="width: 100%">
            <el-option label="2024级" value="2024级" />
            <el-option label="2023级" value="2023级" />
            <el-option label="2022级" value="2022级" />
            <el-option label="2021级" value="2021级" />
            <el-option label="2020级" value="2020级" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="正常" value="active" />
            <el-option label="禁用" value="disabled" />
            <el-option label="待审核" value="pending" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSubmit" 
          :loading="submitLoading"
        >
          {{ isEdit ? '更新' : '添加' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StudentManagement',
  data() {
    return {
      loading: false,
      submitLoading: false,
      studentList: [],
      schoolOptions: [],
      searchForm: {
        keyword: "",
        schoolId: "",
        status: "",
        createTimeRange: null,
        lastLoginTimeRange: null,
        major: '',
        grade: null
      },
      showAdvancedSearch: false,
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      dialogVisible: false,
      detailDialogVisible: false,
      isEdit: false,
      currentStudent: {},
      formData: {
        name: '',
        nickname: '',
        phone: '',
        email: '',
        schoolId: null,
        major: '',
        grade: '',
        status: 'active'
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑学生' : '添加学生'
    }
  },
  mounted() {
        this.loadStudentList()
    this.loadSchoolOptions()
  },
  methods: {
    // 加载学生列表
    loadStudentList() {
      this.loading = true
      // 模拟数据，实际应该调用API
      setTimeout(() => {
      this.studentList = [
        {
          id: 1,
          name: "张三",
            nickname: "微信用户1",
          phone: "18612341234",
          email: "zhangsan@example.com",
          schoolName: "北京大学",
          major: "计算机科学与技术",
          grade: "2021级",
          status: "active",
            createTime: "2025-09-13T07:50:32",
            lastLoginTime: "2025-09-16T10:30:00"
        },
        {
          id: 2,
          name: "李四",
          nickname: "微信用户2",
          phone: "18643214321",
          email: "lisi@example.com",
          schoolName: "清华大学",
          major: "软件工程",
          grade: "2020级",
          status: "active",
            createTime: "2025-09-14T07:27:31",
            lastLoginTime: "2025-09-14T15:20:00"
        },
        {
          id: 3,
          name: "王五",
          nickname: "微信用户3",
          phone: "1869769876",
          email: "wangwu@example.com",
          schoolName: "复旦大学",
          major: "信息管理",
          grade: "2022级",
          status: "pending",
            createTime: "2025-09-15T06:42:06",
            lastLoginTime: "2025-09-15T09:15:00"
        }
      ]
      this.pagination.total = 3
        this.loading = false
      }, 1000)
    },

    // 加载学校选项
    loadSchoolOptions() {
      // 模拟数据
      this.schoolOptions = [
        { id: 1, name: "北京大学" },
        { id: 2, name: "清华大学" },
        { id: 3, name: "复旦大学" },
        { id: 4, name: "上海交通大学" }
      ]
    },

    // 搜索
    handleSearch() {
      console.log('搜索参数:', this.searchForm)
      this.loadStudentList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        keyword: "",
        schoolId: "",
        status: "",
        createTimeRange: null,
        lastLoginTimeRange: null,
        major: '',
        grade: null
      }
      this.loadStudentList()
    },

    // 分页大小改变
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.loadStudentList()
    },

    // 当前页改变
    handleCurrentChange(page) {
      this.pagination.currentPage = page
      this.loadStudentList()
    },

    // 查看学生详情
    handleView(row) {
      this.currentStudent = { ...row }
      this.detailDialogVisible = true
    },

    // 添加学生
    handleAdd() {
      this.isEdit = false
      this.formData = {
        name: '',
        nickname: '',
        phone: '',
        email: '',
        schoolId: null,
        major: '',
        grade: '',
        status: 'active'
      }
      this.dialogVisible = true
    },

    // 编辑学生
    handleEdit(row) {
      this.isEdit = true
      this.formData = { ...row }
      this.dialogVisible = true
    },

    // 切换学生状态
    handleToggleStatus(row) {
      const action = row.status === 'active' ? '禁用' : '启用'
      this.$confirm(`确定要${action}学生 ${row.name || row.nickname} 吗？`, `${action}学生`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API
        row.status = row.status === 'active' ? 'disabled' : 'active'
        this.$message.success(`${action}成功`)
      }).catch(() => {
        this.$message.info(`已取消${action}`)
      })
    },

    // 删除学生
    handleDelete(row) {
      this.$confirm(`确定要删除学生 ${row.name || row.nickname} 吗？`, '删除学生', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        // 这里应该调用API
        const index = this.studentList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.studentList.splice(index, 1)
        }
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 提交表单
    handleSubmit() {
      this.$refs.studentForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          // 模拟API调用
          setTimeout(() => {
            if (this.isEdit) {
              // 更新学生
              const index = this.studentList.findIndex(item => item.id === this.formData.id)
              if (index > -1) {
                this.studentList.splice(index, 1, { ...this.formData })
              }
              this.$message.success('更新成功')
        } else {
              // 添加学生
              const newStudent = {
                ...this.formData,
                id: Date.now(),
                createTime: new Date().toISOString()
              }
              this.studentList.unshift(newStudent)
              this.$message.success('添加成功')
            }
            this.submitLoading = false
            this.dialogVisible = false
          }, 1000)
        }
      })
    },

    // 关闭对话框
    handleDialogClose() {
      this.$refs.studentForm.resetFields()
    },

    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        'active': 'success',
        'disabled': 'danger',
        'pending': 'warning'
      }
      return typeMap[status] || 'info'
    },

    // 获取状态名称
    getStatusName(status) {
      const nameMap = {
        'active': '正常',
        'disabled': '禁用',
        'pending': '待审核'
      }
      return nameMap[status] || '未知'
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '未设置'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    // 从详情页编辑
    handleEditFromDetail() {
      this.detailDialogVisible = false
      this.handleEdit(this.currentStudent)
    },

    // 检查是否最近活跃
    isRecentlyActive(lastLoginTime) {
      if (!lastLoginTime) return false
      const now = new Date()
      const lastLogin = new Date(lastLoginTime)
      const diffHours = (now - lastLogin) / (1000 * 60 * 60)
      return diffHours <= 24 // 24小时内登录算活跃
    },

    // 获取活跃度等级
    getActivityLevel(lastLoginTime) {
      if (!lastLoginTime) return 0
      const now = new Date()
      const lastLogin = new Date(lastLoginTime)
      const diffDays = (now - lastLogin) / (1000 * 60 * 60 * 24)
      
      if (diffDays <= 1) return 90
      if (diffDays <= 3) return 70
      if (diffDays <= 7) return 50
      if (diffDays <= 30) return 30
      return 10
    },

    // 获取活跃度文字
    getActivityText(lastLoginTime) {
      if (!lastLoginTime) return '从未登录'
      const now = new Date()
      const lastLogin = new Date(lastLoginTime)
      const diffDays = (now - lastLogin) / (1000 * 60 * 60 * 24)
      
      if (diffDays <= 1) return '非常活跃'
      if (diffDays <= 3) return '较为活跃'
      if (diffDays <= 7) return '一般活跃'
      if (diffDays <= 30) return '不太活跃'
      return '长期未登录'
    },

    // 获取相对时间
    getRelativeTime(dateString) {
      if (!dateString) return '未知时间'
      
      const now = new Date()
      const date = new Date(dateString)
      const diffMs = now - date
      const diffSec = Math.floor(diffMs / 1000)
      const diffMin = Math.floor(diffSec / 60)
      const diffHour = Math.floor(diffMin / 60)
      const diffDay = Math.floor(diffHour / 24)
      const diffMonth = Math.floor(diffDay / 30)
      const diffYear = Math.floor(diffDay / 365)
      
      if (diffSec < 60) return '刚刚'
      if (diffMin < 60) return `${diffMin}分钟前`
      if (diffHour < 24) return `${diffHour}小时前`
      if (diffDay < 30) return `${diffDay}天前`
      if (diffMonth < 12) return `${diffMonth}个月前`
      return `${diffYear}年前`
    },

    // 获取状态图标
    getStatusIcon(status) {
      const iconMap = {
        'active': 'el-icon-success',
        'disabled': 'el-icon-error',
        'pending': 'el-icon-warning',
        'banned': 'el-icon-circle-close'
      }
      return iconMap[status] || 'el-icon-question'
    },

    // 获取表格行样式
    getRowClassName({row}) {
      if (row.status === 'disabled' || row.status === 'banned') {
        return 'disabled-row'
      }
      if (this.isRecentlyActive(row.lastLoginTime)) {
        return 'active-row'
      }
      return ''
    },

    // 处理行点击
    handleRowClick(row, column) {
      if (column && column.property !== 'action') {
        this.handleView(row)
      }
    },

    // 处理下拉菜单操作
    handleAction(command) {
      const { action, row } = command
      switch (action) {
        case 'toggle':
          this.handleToggleStatus(row)
          break
        case 'reset':
          this.handleResetPassword(row)
          break
        case 'delete':
          this.handleDelete(row)
          break
      }
    },

    // 重置密码
    handleResetPassword(row) {
      this.$confirm(`确定要重置学生 ${row.name || row.nickname} 的密码吗？`, '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里调用重置密码的API
        this.$message.success('密码重置成功')
      }).catch(() => {
        this.$message.info('已取消重置')
      })
    },

    // 切换高级搜索
    toggleAdvancedSearch() {
      this.showAdvancedSearch = !this.showAdvancedSearch
    },

    // 导出数据
    handleExport() {
      this.$message.info('导出功能开发中...')
    }
  }
}
</script>

<style scoped>
.student-management {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 确保表格完全填充容器 */
.student-management ::v-deep .el-table {
  width: 100% !important;
}

.student-management ::v-deep .el-table__body-wrapper {
  overflow-x: auto;
}

.search-area {
  margin-bottom: 20px;
}

.search-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.search-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-title i {
  color: #409eff;
}

.search-content {
  padding: 0;
}

.search-row {
  margin-bottom: 15px;
}

.search-item {
  margin-bottom: 10px;
}

.search-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.search-input,
.search-select,
.search-date {
  width: 100%;
}

.search-buttons {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 100%;
  padding-top: 25px;
}

.advanced-search {
  margin-top: 15px;
  padding: 15px;
  background: #fafbfc;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.pagination-area {
  margin-top: 20px;
  text-align: right;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.no-data p {
  margin: 5px 0;
  font-size: 14px;
}

/* 学生信息列样式 */
.student-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.student-name {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.student-id {
  font-size: 12px;
  color: #909399;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* 头像容器样式 */
.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.student-avatar-small {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #52c41a;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
  animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* 联系方式样式 */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;
}

.contact-item i {
  color: #909399;
  width: 14px;
}

.contact-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c0c4cc;
  font-style: italic;
}

.contact-empty i {
  color: #f56c6c;
}

/* 学术信息样式 */
.academic-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #303133;
  font-size: 13px;
}

.school-name i {
  color: #409eff;
}

.academic-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.major {
  color: #67c23a;
  font-weight: 500;
}

.grade {
  color: #e6a23c;
  font-weight: 500;
}

/* 状态标签样式 */
.status-wrapper {
  display: flex;
  justify-content: center;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 12px;
}

.status-tag i {
  font-size: 12px;
}

/* 时间显示样式 */
.time-text {
  color: #606266;
  font-size: 13px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  cursor: help;
  transition: color 0.3s ease;
}

.time-text:hover {
  color: #409eff;
}

.text-muted {
  color: #c0c4cc;
  font-size: 13px;
  font-style: italic;
}

.text-muted i {
  margin-right: 4px;
  color: #f56c6c;
}

/* 表格中的时间列样式 */
.student-management ::v-deep .el-table .time-text {
  display: inline-block;
  padding: 2px 6px;
  background: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.student-management ::v-deep .el-table .time-text:hover {
  background: #ecf5ff;
  border-color: #b3d8ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.12);
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* 表格行样式 */
.student-management ::v-deep .disabled-row {
  background-color: #f5f5f5;
  opacity: 0.8;
}

.student-management ::v-deep .active-row {
  background-color: #f8f9fa;
}

.student-management ::v-deep .el-table__row:hover {
  background-color: #f5f7fa !important;
  cursor: pointer;
}

/* 表格头部样式增强 */
.student-management ::v-deep .el-table th {
  padding: 12px 0;
  font-size: 14px;
}

.student-management ::v-deep .el-table td {
  padding: 12px 0;
}

/* 下拉菜单样式 */
.student-management ::v-deep .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}

.student-management ::v-deep .el-dropdown-menu__item i {
  width: 16px;
  text-align: center;
}

/* 学生详情对话框样式 */
.student-management ::v-deep .student-detail-dialog .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  margin: 0 !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  overflow-y: auto;
}

.student-management ::v-deep .student-detail-dialog .el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

.student-management ::v-deep .student-detail-dialog .el-dialog__body {
  padding: 0;
  background: #f8fafc;
}

.student-detail-container {
  background: white;
}

/* 详情头部样式 */
.detail-header {
  background: #f5f7fa;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
}


.header-left {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.avatar-section {
  position: relative;
}

.student-avatar {
  border: 2px solid #e4e7ed;
}

.online-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: #52c41a;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.basic-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.student-id {
  font-size: 14px;
  color: #909399;
  font-weight: 400;
}

.status-badge {
  margin-top: 8px;
}

.close-btn {
  color: #909399;
  font-size: 16px;
  padding: 4px;
}

.close-btn:hover {
  color: #606266;
}

/* 详情内容样式 */
.detail-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card {
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
}

.card-header {
  background: #f5f7fa;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header i {
  color: #606266;
  font-size: 16px;
}

.card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.card-body {
  padding: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.info-label i {
  color: #909399;
  width: 16px;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 600;
}

.activity-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #e4e7ed;
}

.stat-icon {
  width: 32px;
  height: 32px;
  background: #409eff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 14px;
  color: #303133;
  font-weight: 600;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.activity-text {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
}

/* 详情底部样式 */
.detail-footer {
  padding: 16px 20px;
  background: #fafafa;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left, .footer-right {
  display: flex;
  gap: 12px;
}


/* 进度条样式覆盖 */
.student-management ::v-deep .el-progress-bar {
  padding-right: 0;
}

.student-management ::v-deep .el-progress-bar__outer {
  background-color: #e2e8f0;
  border-radius: 6px;
  height: 6px;
}

.student-management ::v-deep .el-progress-bar__inner {
  background: #409eff;
  border-radius: 6px;
}

/* 标签样式增强 */
.student-management ::v-deep .el-tag {
  display: flex;
  align-items: center;
  gap: 4px;
}

.student-management ::v-deep .el-tag--mini {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-management ::v-deep .student-detail-dialog .el-dialog {
    width: 95% !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    margin: 0 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .student-management ::v-deep .student-detail-dialog .el-dialog__wrapper {
    padding: 10px !important;
  }
  
  .detail-header {
    padding: 24px;
  }
  
  .detail-content {
    padding: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-stats {
    grid-template-columns: 1fr;
  }
  
  .search-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
